<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>学习esayui</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
		<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" />
		<SCRIPT type="text/javascript">
			$(function() {

				var setting = {
					data: {
						simpleData: {
							enable: true
						}
					},
					callback: {
						onClick: function(event, treeId, treeNode, clickFlag) {
							if(treeNode.page != undefined && treeNode.page != ""){
								var flag = $('#tabs').tabs('exists',treeNode.name);
								if(!flag){
									var context = '<div style="width:100%;height:100%;overflow:hidden;">'
										+ '<iframe src="'
										+ treeNode.page
										+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
									$('#tabs').tabs('add',{    
									    title:treeNode.name,    
									    content:context,    
									    closable:true,    
									    tools:[{    
									        iconCls:'icon-mini-refresh',    
									        handler:function(){    
									            var tab = $('#tabs').tabs('getSelected');  // 获取选择的面板tab.panel('refresh', 'get_content.php');
												tab.panel('refresh');
									        }    
									    }]    
									});
								}else{
									$('#tabs').tabs('select',treeNode.name);
								}
							}
						}
					}
				};
				var treeNodes = [
					{"id": 1,"pId": 0,"name": "基础数据","open":"true"},
					{"id": 11,"pId": 1,"name": "阿里","page":"http://www.taobao.com"},
					{"id": 12,"pId": 1,"name": "百度","page":"http://www.baidu.com"},
					{"id": 2,"pId": 0,"name": "受理"},
					{"id": 21,"pId": 2,"name": "出入库"},
					{"id": 22,"pId": 2,"name": "配送"}
				];
				$.fn.zTree.init($("#tree"), setting, treeNodes);
				
				var currentRightTitle;
				$("#tabs").tabs({
					onContextMenu : function(e, title,index){
						e.preventDefault();
						currentRightTitle = title;
						$('#memu').menu('show', {    
						  	left: e.pageX,    
  							top: e.pageY    
						}); 
					}
				});
				$('#memu').menu({    
				    onClick:function(item){  
				        if(item.name === 'Close'){
				        	$('#tabs').tabs('close',currentRightTitle);
				        }
				        else if(item.name === 'CloseOthers'){
				        	var tbs = $('#tabs').tabs('tabs');
				        	$(tbs).each(function(){
				        		var tt = $(this).panel('options');
				        		console.log(tt);
				        		if(tt.title != '消息中心' &&  tt.title != currentRightTitle){
				        			$('#tabs').tabs('close',tt.title);
				        		}
				        	})
				        }
				        else if(item.name === 'ColseAll'){
				        	var tbs = $('#tabs').tabs('tabs');
				        	$(tbs).each(function(){
				        		var tt = $(this).panel('options');
				        		if(tt.title != '消息中心'){
				        			$('#tabs').tabs('close',tt.title);
				        		}
				        	})
				        }
				    }    
				});
			})
			function editPassword(){
				$('#win').window('open');   
			}
			
			function callManeger(){
				$.messager.show({
					title:'我的消息',
					msg:'请联系管理员001号',
					timeout:5000,
					showType:'fade'
				});
			}
			
			function exitSystem(){
				$.messager.confirm('退出系统', '您是否确认退出该系统吗？', function(r){
					if (r){
						alert('退出系统');
					}
				});
			}
		</SCRIPT>
	</head>

	<body class="easyui-layout">
		<div data-options="region:'north',split:true" style="height:100px;">
			<a href="javascript:void(0)" id="mb" class="easyui-menubutton"     
        data-options="menu:'#mm',iconCls:'icon-edit'">系统菜单</a>   
			<div id="mm" style="width:150px;">   
			    <div onclick="editPassword()">修改密码</div>   
			    <div onclick="callManeger()">联系管理员</div>   
			    <div class="menu-sep"></div>   
			    <div data-options="iconCls:'icon-remove'" onclick="exitSystem()">退出系统</div>   
			</div>  
		</div>
		<div data-options="region:'south',split:true" style="height:100px;"></div>
		<div data-options="region:'west',title:'菜单导航',split:true" style="width:200px;">
			<div id="myAccordion" class="easyui-accordion" data-options="fit:true" style="width:300px;height:200px;border: 0px;">
				<div title="基本功能" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
					<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
				</div>
				<div title="系统管理" data-options="iconCls:'icon-reload'" style="padding:10px;">
					content2
				</div>
			</div>
		</div>
		<div data-options="region:'center'" style="padding:0px;background:#eee;border: 0px;">
			<div id="tabs" class="easyui-tabs" data-options="fit:true" style="width:500px;height:250px;">
				<div title="消息中心" style="padding:20px;">
					tab1
				</div>
			</div>
			
		</div>
		
		<div id="win" class="easyui-window" title="修改密码" style="width:300px;height:200px"   
		        data-options="iconCls:'icon-save',modal:true,closed:'true'">   
	        <form id="ff" method="post">   
			    <div region="center">   
			        <label for="name">密码:</label>   
			        <input class="easyui-validatebox" type="password" name="password" data-options="validType:'password'" />   
			    </div>   
			    <div region="center">   
			        <label for="email">确认密码:</label>   
			        <input class="easyui-validatebox" type="password" name="repassword" data-options="validType:'password'" />   
			    </div>   
			</form>
		</div>

		
		<div id="memu" class="easyui-menu" style="width:120px;">   
		    <div data-options="name:'Close'">关闭当前窗口</div>
			<div data-options="name:'CloseOthers'">关闭其它窗口</div>
			<div class="menu-sep"></div>  <!-- 分隔线 -->
			<div data-options="name:'ColseAll',iconCls:'icon-cancel'">关闭全部窗口</div>  
		</div>
	</body>

</html>